﻿<!--
 THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
 ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
 THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
 PARTICULAR PURPOSE.

 Copyright (c) Microsoft Corporation. All rights reserved
-->
<local:HiloPage
    x:Name="pageRoot"
    x:Uid="Page"
    x:Class="Hilo.ImageBrowserView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:Hilo.Common"
    xmlns:local="using:Hilo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=ImageBrowserVM}">

    <Page.Resources>
        <local:BooleanToBrushConverter x:Key="BrushConverter" />
        <common:BooleanNegationConverter x:Key="BoolNegationConverter" />
        <common:BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
        <CollectionViewSource
            x:Name="MonthGroupedItemsViewSource"
            d:Source="{Binding MonthGroups, Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
            Source="{Binding MonthGroups}"
            IsSourceGrouped="true"
            ItemsPath="Items"/>
        <CollectionViewSource
            x:Name="YearGroupedItemsViewSource"
            d:Source="{Binding YearGroups, Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
            Source="{Binding YearGroups}"
            IsSourceGrouped="true"
            ItemsPath="Items"/>
    </Page.Resources>

    <Grid x:Name="ContentRoot"
          d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
          Background="{StaticResource HiloPageBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:ConnectionId='0' x:Name="BackButton"
                    AutomationProperties.AutomationId="BackButton"
                                  
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="PageTitle"
                       x:Uid="PicturesViewTitle"
                       Grid.Column="1"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Text="{Binding ImageBrowserPageTitle}"/>
        </Grid>

        <!-- Photos Grid -->
        <!--Margin="50" -->
        <Grid Grid.Row="1">
            <!-- Grouped Photos Hub -->
            <SemanticZoom x:ConnectionId='0' x:Name="SemanticZoom" 
                          VerticalAlignment="Bottom"
                                                                      
                          IsTabStop="True" 
                          TabIndex="0"
                          IsZoomOutButtonEnabled="True">
                <SemanticZoom.ZoomedOutView>
                    <GridView x:Name="YearPhotosGridView" 
                              AutomationProperties.AutomationId="YearPhotosGridView"
                              AutomationProperties.Name="Year Grouped Photos"
                              ItemsSource="{Binding Source={StaticResource YearGroupedItemsViewSource}}"
                              IsItemClickEnabled="True"
                              Padding="116,0,40,46"
                              SelectionMode="None">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid x:ConnectionId='0' Background="{Binding HasPhotos, Converter={StaticResource BrushConverter}}"
                                      Height="150"
                                      IsTapEnabled="{Binding HasPhotos}"
                                                                                    
                                      Margin="0"
                                      Width="150">
                                    <TextBlock Text="{Binding Name}"
                                               IsTapEnabled="{Binding HasPhotos}"
                                               Margin="6"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Right"
                                               TextAlignment="Center"
                                               Foreground="Black"
                                               FontSize="40" />
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <Grid Margin="1,0,0,6">
                                            <TextBlock AutomationProperties.AutomationId="YearGroupTitle"
                                                       Text="{Binding Title}"
                                                       Style="{StaticResource HeaderTextStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Horizontal"
                                                               Margin="0,0,80,0"
                                                               Width="700"
                                                               MaximumRowsOrColumns="4"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView x:ConnectionId='0' x:Name="MonthPhotosGridView" 
                              AutomationProperties.AutomationId="MonthPhotosGridView"
                              AutomationProperties.Name="Month Grouped Photos"
                              ItemsSource="{Binding Source={StaticResource MonthGroupedItemsViewSource}}" 
                              ItemContainerStyle="{StaticResource HiloGridViewItemStyle}"
                                                            
                              IsItemClickEnabled="True"
                              Padding="116,0,40,46"
                              SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                              SelectionMode="Single">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="2">
                                    <Image Source="{Binding Thumbnail}"
                                           Stretch="UniformToFill"
                                           VerticalAlignment="Stretch"
                                           HorizontalAlignment="Stretch">
                                    </Image>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Margin="1,0,0,6"
                                                    Orientation="Horizontal">
                                            <Button AutomationProperties.AutomationId="MonthGroupTitle"
                                                    Content="{Binding Title}"
                                                    Command="{Binding ElementName=MonthPhotosGridView, Path=DataContext.GroupCommand}"
                                                    CommandParameter="{Binding}"
                                                    Style="{StaticResource HiloTextButtonStyle}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Vertical"
                                                               Margin="0,0,80,0"
                                                               ItemHeight="200"
                                                               ItemWidth="200"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
            <ProgressRing x:Name="ProgressRing" 
                          IsActive="{Binding InProgress}" 
                          Height="60"
                          Width="60"
                          Foreground="{StaticResource HiloHighlightBrush}"/>
            <ListView x:ConnectionId='0' x:Name="MonthPhotosListView" 
                      AutomationProperties.AutomationId="MonthPhotosListView"
                      AutomationProperties.Name="Month Grouped Photos"
                      ItemsSource="{Binding Source={StaticResource MonthGroupedItemsViewSource}}"
                      ItemContainerStyle="{StaticResource HiloListViewItemStyle}"
                      Margin="0,-10,0,0"
                      Padding="10,0,0,60"
                                                    
                      IsItemClickEnabled="True"
                      SelectionMode="Single"
                      Visibility="Collapsed">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="2">
                            <Image HorizontalAlignment="Center"
                                   Source="{Binding Thumbnail}"
                                   Stretch="UniformToFill"
                                   VerticalAlignment="Center">
                            </Image>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="7,7,0,0">
                                    <Button AutomationProperties.AutomationId="MonthGroupTitle"
                                            Content="{Binding Title}" FontSize="8"
                                            Command="{Binding ElementName=MonthPhotosListView, Path=DataContext.GroupCommand}"
                                            CommandParameter="{Binding}"
                                            Margin="40,0,0,0"
                                            Style="{StaticResource HiloSnappedTextButtonStyle}"/>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Horizontal"
                                                       ItemHeight="150"
                                                       ItemWidth="150" />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MonthPhotosListView" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SemanticZoom" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    <local:HiloPage.BottomAppBar>
        <AppBar x:Name="ImageBrowserViewBottomAppBar"
                x:Uid="AppBar"
                AutomationProperties.AutomationId="ImageBrowserViewBottomAppBar"
                IsOpen="{Binding Path=IsAppBarOpen, Mode=TwoWay}"
                IsSticky="{Binding Path=IsAppBarSticky, Mode=TwoWay}"
                Padding="10,0,10,0"
                Visibility="{Binding IsAppBarEnabled, Mode=TwoWay, Converter={StaticResource BoolToVisConverter}}">
            <Grid>
                <StackPanel HorizontalAlignment="Left" 
                            Orientation="Horizontal">
                    <Button x:Name="RotateButton"
                            x:Uid="RotateAppBarButton"
                            AutomationProperties.AutomationId="RotateCommand"
                            Command="{Binding RotateImageCommand}"
                            Style="{StaticResource RotateAppBarButtonStyle}"
                            Tag="Rotate" />
                    <Button x:Name="CropButton"
                            x:Uid="CropAppBarButton"
                            AutomationProperties.AutomationId="CropCommand" 
                            Command="{Binding CropImageCommand}"
                            Style="{StaticResource CropAppBarButtonStyle}"
                            Tag="Crop" />
                    <Button x:Name="CartoonizeButton"
                            x:Uid="CartoonizeAppBarButton"
                            Command="{Binding CartoonizeImageCommand}"
                            Style="{StaticResource CartoonEffectAppBarButtonStyle}"
                            Tag="Cartoon effect" />
                    <Button x:Name="RotateButtonNoLabel"
                            Command="{Binding RotateImageCommand}" 
                            Style="{StaticResource RotateAppBarButtonNoLabelStyle}" 
                            Tag="Rotate"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="RotateAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="CropButtonNoLabel"
                            Command="{Binding CropImageCommand}"
                            Style="{StaticResource CropAppBarButtonNoLabelStyle}"
                            Tag="Crop"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="CropAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="CartoonizeButtonNoLabel"
                            Command="{Binding CartoonizeImageCommand}"
                            Style="{StaticResource CartoonEffectAppBarButtonNoLabelStyle}"
                            Tag="Cartoon effect"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="CartoonizeAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </local:HiloPage.BottomAppBar>

</local:HiloPage>

